<script setup lang="ts">
import { useRouter } from 'vue-router'

// 封装需求❓：支持 title rightText 属性，支持 click-right 事件，返回上一页或默认首页
const props = defineProps<{
  title?: string
  rightText?: string
  cb?: () => void // 回调函数
}>()
const emit = defineEmits<{
  (e: 'click-right'): void
}>()

// 获取路由实例
// router === this.$router(vue2)
const router = useRouter()
const onClickLeft = () => {
  if (props.cb) {
    // 如果传了cb函数，就执行这个函数
    return props.cb()
  }
  // 点击左边left-arrow图标执行
  // 返回上一页或默认首页
  console.log('点击左边left-arrow图标执行')
  if (history.state.back) {
    // 返回上次页面
    router.back()
  } else {
    // 跳转默认首页
    router.push('/')
  }
}
const onClickRight = () => {
  // 点击右边文字执行
  console.log('点了右边文字')
  emit('click-right')
}
</script>

<template>
  <div class="box">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      fixed
      :title="title"
      :right-text="rightText"
      @click-right="onClickRight"
    ></van-nav-bar>
  </div>
</template>

<style lang="scss" scoped>
// .box {
//   border: 2px solid red;
// }

//  .box[data-v-cd3f3966] {
//   border: 0.53333vw solid red;
// }
/**
背景：scoped样式私有化，避免样式冲突
原理：组件下元素生成添加一个属性=》data-v-hash值 =》类名会被添加属性选择器限定，避免冲突

== 深度作用选择符 ==
作用：覆盖组件库样式
vue2: /deep/
vue3: ::v-deep()
写法：
1. ::v-deep() 类名 {} => 1个
2. ::v-deep() {  } =》多个
*/
// 使用技巧：
// 情况1:元素生上有=》data-v-hash 属性
// .van-nav-bar {
//   border: 2px solid red;
// }

// 情况2:元素生上没有=》data-v-hash 属性 => 需要使用深度作用选择符
// ::v-deep() .van-nav-bar__content {
//   background-color: pink;
// }

// ::v-deep() {
//   .van-nav-bar__content {
//     background-color: pink;
//   }
// }

// ::v-deep() {
.van-nav-bar {
  // &指外层父拼接类名： .van-nav-bar__arrow {}
  &__arrow {
    font-size: 18px;
    color: var(--cp-text1);
  }

  &__text {
    font-size: 15px;
  }
}

// }
</style>
